/*
  学习目标：props校验
  作用：指定标签属性的类型，违反则报错, 类似Vue中props的对象写法
  1. 引进props-types
  2. 给组件设置规则对象
  // 💥 组件名.propTypes = { 规则}
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          msg="abc"
          num={10}
          isShow={true}
          obj={{ name: 'zs', age: 20 }}
          arr={[1, 2, 3]}
          fn={() => {}}
          ele={<i>我是传递的element元素</i>}
          temp={() => {}}
          shape={{ name: 'zs', age: 20 }}
        ></Child>
      </div>
    );
  }
}

// 1. 常见类型：array、bool、func、number、object、string
// 2. React元素类型：element
// 3. 必填项：isRequired
// 4. 特定结构的对象：shape
class Child extends React.Component {
  render() {
    return <div>我是子组件，我要做校验</div>;
  }
}
// propTypes 是组件上面的属性，用小写，作用是可以设置组件的 props 规则
Child.propTypes = {
  // isRequired 代表该 prop 必传
  msg: PropTypes.string.isRequired,
  num: PropTypes.number,
  obj: PropTypes.object,
  arr: PropTypes.array,
  // 布尔值的检验名称 是 bool
  // 函数的的检验名称 是 func
  isShow: PropTypes.bool,
  fn: PropTypes.func,
  // 标签的校验名称 是 element
  ele: PropTypes.element,
  // any 代表任意类型都可以,一般配合 isRequired 使用
  temp: PropTypes.any.isRequired,
  // shape 特定结构的对象
  shape: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number.isRequired,
  }),
};
